<template>
  <Layout :name="'水情监视'">
    <!-- 选项区域 -->
    <div class="station-select">
      <span class="station-title">当前显示站点:&nbsp;</span>
      <el-select 
        v-model="station" 
        placeholder="Select" 
        style="width: 120px"
        @change="handleStationChange"
      >
        <el-option
          v-for="item in stationData"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
      <div class="split"></div>
      <div class="date">{{ nowDate }}</div>
    </div>
    <!-- echartsDom -->
    <div id="waterLine"></div>
  </Layout>
</template>

<script setup lang="ts">
  import Layout from '../layout.vue';
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import { dayjs } from 'element-plus';
  import { getWaterLiveData } from '@/api/pageApi';

  const props = defineProps(['stationData']);

  // 站点选择
  const station = ref("60115000");
  const nowDate = ref(dayjs(new Date()).format('YYYY-MM'));

  // 图表配置
  let lineDom: HTMLElement | null = null;
  let charts: any = null;
  const xAxisData = ref<string[]>([]);
  const wData = ref<number[]>([]);
  const qData = ref<number[]>([]);
  const renderChart = () => {
    if(charts != null && charts != undefined) {
      charts.dispose();
    }
    // 求出水位最大最小值
    const wMax = Math.max(...wData.value);
    const wMin = Math.min(...wData.value);
    // 求出流量最大最小值
    const qMax = Math.max(...qData.value);
    const qMin = Math.min(...qData.value);

    lineDom = document.getElementById("waterLine");
    charts = echarts.init(lineDom);
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        top: '20%',
        bottom: '10%',
        left: '10%',
        right: '13%'
      },
      legend: {
        icon: 'circle',
        type: 'plain',
        data: ['水位', '流量'],
        textStyle: {
          color: '#ffffff'
        }
      },
      xAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: '#ffffff'
          }
        },
        axisLabel: {
          color: '#ffffff'
        },
        data: xAxisData.value
      },
      yAxis: [
        {
          name: '水位(m)',
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          axisLabel: {
            color: '#ffffff'
          },
          max: wMax,
          min: wMin
        },
        {
          name: '流量(m³/s)',
          type: 'value',
          position: 'right',
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          axisLabel: {
            color: '#ffffff'
          },
          max: qMax,
          min: qMin
        },
      ],
      series: [
        {
          name: '水位',
          type: 'line',
          smooth: true,
          yAxisIndex: 0,
          data: wData.value
        },
        {
          name: '流量',
          type: 'line',
          smooth: true,
          yAxisIndex: 1,
          data: qData.value
        },
      ]
    };
    option && charts.setOption(option);
  }

  const handleStationChange = () => {
    getWaterLiveData(station.value).then((res: any) => {
      console.log('查看水情监视接口数据');
      console.log(res); // res.data
      wData.value = [];
      qData.value = [];
      xAxisData.value = [];
      res.data.map((item: any) => {
        wData.value.push(item.z);
        qData.value.push(item.q);
        xAxisData.value.push(dayjs(item.tm).format("MM-DD HH:mm"));
      })
      // 数据处理完渲染图表
      renderChart();
    })
  }

  onMounted(() => {
    handleStationChange();
  })
</script>

<style lang="less" scoped>
  .station-select {
      width: 92%;
      margin: 10px auto 10px auto;
      box-sizing: border-box;
      padding-left: 10px;
      display: flex;
      align-items: center;
      .station-title {
        display: inline-block;
        margin-right: 15px;
        color: #ffffff;
        font-size: 16px;
      }
      .el-select {
        :deep(.el-select__wrapper) {
          background: transparent;
          box-shadow: none;
          .el-select__selected-item {
            color: #F2C41A;
            font-size: 18px;
          }
          .el-select__caret {
            color: #F2C41A;
          }
        }
      }
      .split {
        width: 1px;
        height: 22px;
        margin-left: 22px;
        background-color: #ffffff;
      }
      .date {
        color: #04C7DF;
        font-size: 16px;
        text-indent: 24px;
      }
  }
  #waterLine {
    width: 92%;
    height: 187px;
    margin: 0 auto;
  }
</style>